import React, { PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { connect } from 'react-redux'
import { WhiteSpace } from 'antd-mobile'
import Spinner from 'react-native-loading-spinner-overlay'
import { createAction, NavigationActions } from '../../utils'
import screen from '../../utils/screen'
import Echarts from '../../widgets/echarts'
import { Summary, OwnCard, PieChart, GroupBarChart, PullView,ViewMoreText } from '../../widgets'

@connect(({ home, cashflow, loading }) => ({ ...home, ...cashflow, isLoading: loading.models.cashflow}))
export default class extends PureComponent {
  constructor(props) {
    super(props)
  }

  componentWillMount() {
    this.props.dispatch(createAction("cashflow/initState")({}))
  }

  componentDidMount() {
    const mainTime= this.props.mainTime;
    this.getContent(mainTime.startTime, mainTime.endTime)
  }

  componentWillReceiveProps(nextProps) {
    const mainTime= this.props.mainTime;
    const nextMainTime = nextProps.mainTime;
    if(nextMainTime.startTime === undefined || nextMainTime.endTime === undefined) {
      return false
    }
    if(nextMainTime.startTime !== mainTime.startTime || nextMainTime.endTime !== mainTime.endTime) {
      this.getContent(nextMainTime.startTime, nextMainTime.endTime)
    }
  }

  getContent = (startT, endT) => {
    this.props.dispatch(createAction("cashflow/getCashFlowMainMsg")({
      startTime: startT,
      endTime: endT
    }))
    this.props.dispatch(createAction("cashflow/getContentMsg")({
      startTime: startT,
      endTime: endT
    }))
    this.props.dispatch(createAction("cashflow/getCashMainHistogram")({
      startTime: startT,
      endTime: endT
    }))
    this.props.dispatch(createAction("cashflow/getCashFlowInOutHistogram")({
      startTime: startT,
      endTime: endT
    }))
  }

  geneCasFlowSummary = (cashFlowSummary) => {
    const jyje = cashFlowSummary.jyje || {}
    const tzje = cashFlowSummary.tzje || {}
    const czje = cashFlowSummary.czje || {}
    const xjze = cashFlowSummary.xjze ||{}
    const qmdjw = cashFlowSummary.qmdjw ||{}
    return [{
      zi: '经营活动产生的现金流量净额',
      chou: (jyje.onRise || 0),
      yin: jyje.showMoney || 0
    },{
      zi: '投资活动产生的现金流量净额',
      chou: (tzje.onRise || 0),
      yin: tzje.showMoney || 0
    },{
      zi: '筹资活动产生的现金流量净额',
      chou: (czje.onRise || 0),
      yin: czje.showMoney || 0
    },{
      zi: '现金及现金等价物净增加额',
      chou: (xjze.onRise || 0),
      yin: xjze.showMoney || 0
    },{
      zi: '期末现金及现金等价物余额',
      chou: (qmdjw.onRise || 0),
      yin: qmdjw.showMoney || 0
    }]
  }

  renderStackBarOptions = (text, legends, xAxisDatas, datas) => {
    const option = {
      title : {
        show: false,
        text: text,
      },
      tooltip : {
        trigger: 'axis',
        position: ['30%', '30%'],
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        containLabel: true
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 10,
        bottom: 20,
        data: legends
      },
      xAxis :{
          type : 'category',
          position: 'bottom',
          data : xAxisDatas,
          axisLabel: {
            show: true,
            rotate: 30,
            interval: 0,
          }
      },
      yAxis : [
        {
          type : 'value',
          name: '金额(万元)',
        }
      ],
      series : [
        {
          name: legends[0],
          type:'bar',
          data: datas[0],
        },
        {
          name: legends[1],
          type:'bar',
          data: datas[1],
        }
      ]
    };
    return option
  }

  renderTwoOptions = (text, legends, xAxisDatas, datas) => {
    const option = {
      tooltip : {
        trigger: 'axis',
        position: ['30%', '30%'],
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        bottom: 'bottom',
        data:legends
      },
      grid: {
        containLabel: true
      },
      yAxis : [
        {
          type : 'value',
          name: '金额(万元)',
        }
      ],
      xAxis : [
        {
          type : 'category',
          axisLabel: {
            interval: 0,
          },
          data : xAxisDatas
        }
      ],
      series : [
        {
          name: legends[0],
          type:'bar',
          stack: 'one',
          label: {
            normal: {
              show: true
            }
          },
          data: datas[0]
        },
        {
          name: legends[1],
          type:'bar',
          stack: 'two',
          label: {
            normal: {
              show: true
            }
          },
          data: datas[1]
        },
        {
          name: legends[2],
          type:'bar',
          stack: 'one',
          label: {
            normal: {
              show: true
            }
          },
          data: datas[2]
        },
        {
          name: legends[3],
          type:'bar',
          stack: 'two',
          label: {
            normal: {
              show: true,
            }
          },
          data: datas[3]
        }
      ]
    };
    return option
  }

  render() {
    const { cashFlowSummary,isLoading, mainTime, cashMainHistogram, cashFlowInOutHistogram, yj, gy } = this.props;
    const times = cashFlowSummary.times
    const summaryD = this.geneCasFlowSummary(cashFlowSummary)
    const legends = ['本期', '上期']
    const xAxisDatas = ['经营现金流净额', '投资现金流净额', '筹资现金流净额', '期末现金现金等价物']
    const lineDatas =  cashMainHistogram.lineDatas
    const options = this.renderStackBarOptions("", legends, xAxisDatas, lineDatas)

    const twoLegends = ['本期流入', '上期流入', '本期流出', '上期流出']
    const twoXAxisDatas = ['经营活动','投资活动','筹资活动']
    const twoLineDatas = cashFlowInOutHistogram.lineDatas
    const twoOptions = this.renderTwoOptions("", twoLegends, twoXAxisDatas, twoLineDatas)
    return (
      <PullView onPullRelease={() => {
        this.getContent(mainTime.startTime, mainTime.endTime)
      }}>
        <Spinner visible={isLoading} />
        <View style={styles.summary}>
          <Summary onCellPress={() =>{
            this.props.navigation.navigate('CashFlowStack', {
              initTime: mainTime
            })
          }} content={summaryD} times={times}/>
        </View>
        <WhiteSpace />
        <OwnCard title="概述" extra="报表明细" extraOnPress={() => {
          this.props.navigation.navigate('CashFlowStack', {
            initTime: mainTime
          })
        }}>
          <ViewMoreText>{gy}</ViewMoreText>
        </OwnCard>
        <WhiteSpace />
        <OwnCard title="预警">
          <ViewMoreText>{yj}</ViewMoreText>
        </OwnCard>
        <WhiteSpace />
        <OwnCard title="主要指标变动趋势">
          <Echarts option={options} height={screen.pxToDp(600)} />
        </OwnCard>
        <WhiteSpace />
        <OwnCard title="流入流出现金流量额同期对比">
          <Echarts option={twoOptions} height={screen.pxToDp(600)}/>
        </OwnCard>
      </PullView>
    )
  }
}

const styles = StyleSheet.create({
  summary: {
    paddingHorizontal: screen.pxToDp(26),
    backgroundColor: 'white',
  },
})

